import { Meta, Typeset, Canvas, Story } from '@storybook/blocks';
import { html } from 'lit';

<Meta title="Design System/Typography" />

# Baklava Typography

Typography creates purposeful texture, guiding users to read and understand the hierarchy of information.

The default font is **Rubik** in Baklava Design System. You can give any typography variable in your code like this:

```css
.my-header {
  font: var(--bl-font-display-light);
}
```

## Display Titles

A display fonts is a font that is intended for use at large sizes for headings. Often used on landing pages.

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-display-light` | Weight: 300 / Light <br/> Size: 48px / 3rem  <br/> Height: 56px (font size + `bl-size-2xs`) | <h1 style={{ font: 'var(--bl-font-display-light)' }}>Display Light</h1> |
| `--bl-font-display-regular` | Weight: 400 / Regular <br/> Size: 48px / 3rem  <br/> Height: 56px (font size + `bl-size-2xs`) | <h1 style={{ font: 'var(--bl-font-display-regular)' }}>Display Regular</h1> |
| `--bl-font-display-medium` | Weight: 500 / Medium <br/> Size: 48px / 3rem  <br/> Height: 56px (font size + `bl-size-2xs`) | <h1 style={{ font: 'var(--bl-font-display-medium)' }}>Display Medium</h1> |
| `--bl-font-display-semibold` | Weight: 600 / Semibold <br/> Size: 48px / 3rem  <br/> Height: 56px (font size + `bl-size-2xs`) | <h1 style={{ font: 'var(--bl-font-display-semibold)' }}>Display Semibold</h1> |
| `--bl-font-display-bold` | Weight: 700 / Bold <br/> Size: 48px / 3rem  <br/> Height: 56px (font size + `bl-size-2xs`) | <h1 style={{ font: 'var(--bl-font-display-bold)' }}>Display Bold</h1> |

## Headings

Heading fonts are used as larger, higher impact text, such as in a title or section header.

#### Heading 1

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-heading-1-regular`| Weight: 400 / Regular <br/> Size: 32px / 2rem <br/> Height: 36px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-1-regular)' }}>Heading 1 Regular</h1> |
| `--bl-font-heading-1-medium` | Weight: 500 / Medium <br/> Size: 32px / 2rem <br/> Height: 36px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-1-medium)' }}>Heading 1 Medium</h1> |
| `--bl-font-heading-1-semibold` | Weight: 600 / Semibold <br/> Size: 32px / 2rem <br/> Height: 36px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-1-semibold)' }}>Heading 1 Semibold</h1> |
| `--bl-font-heading-1-bold` | Weight: 700 / Bold <br/> Size: 32px / 2rem <br/> Height: 36px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-1-bold)' }}>Heading 1 Bold</h1> |

#### Heading 2

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-heading-2-regular`| Weight: 400 / Regular <br/> Size: 28px / 1.75rem <br/> Height: 32px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-2-regular)' }}>Heading 2 Regular</h1> |
| `--bl-font-heading-2-medium` | Weight: 500 / Medium <br/> Size: 28px / 1.75rem <br/> Height: 32px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-2-medium)' }}>Heading 2 Medium</h1> |
| `--bl-font-heading-2-semibold` | Weight: 600 / Semibold <br/> Size: 28px / 1.75rem <br/> Height: 32px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-2-semibold)' }}>Heading 2 Semibold</h1> |
| `--bl-font-heading-2-bold` | Weight: 700 / Bold <br/> Size: 28px / 1.75rem <br/> Height: 32px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-2-bold)' }}>Heading 2 Bold</h1> |

#### Heading 3

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-heading-3-regular`| Weight: 400 / Regular <br/> Size: 24px / 1.5rem <br/> Height: 28px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-3-regular)' }}>Heading 3 Regular</h1> |
| `--bl-font-heading-3-medium` | Weight: 500 / Medium <br/> Size: 24px / 1.5rem <br/> Height: 28px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-3-medium)' }}>Heading 3 Medium</h1> |
| `--bl-font-heading-3-semibold` | Weight: 600 / Semibold <br/> Size: 24px / 1.5rem <br/> Height: 28px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-3-semibold)' }}>Heading 3 Semibold</h1> |
| `--bl-font-heading-3-bold` | Weight: 700 / Bold <br/> Size: 24px / 1.5rem <br/> Height: 28px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-heading-3-bold)' }}>Heading 3 Bold</h1> |

## Sub Titles

Subtitles are smaller than headlines. They are typically reserved for medium-emphasis text that is shorter in length.

#### Sub Title 1

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-title-1-regular`| Weight: 400 / Regular <br/> Size: 20px / 1.25rem <br/> Height: 24px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-1-regular)' }}>Sub Title 1 Regular</h1> |
| `--bl-font-title-1-medium` | Weight: 500 / Medium <br/> Size: 20px / 1.25rem <br/> Height: 24px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-1-medium)' }}>Sub Title 1 Medium</h1> |
| `--bl-font-title-1-semibold` | Weight: 600 / Semibold <br/> Size: 20px / 1.25rem <br/> Height: 24px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-1-semibold)' }}>Sub Title 1 Semibold</h1> |
| `--bl-font-title-1-bold` | Weight: 700 / Bold <br/> Size: 20px / 1.25rem <br/> Height: 24px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-1-bold)' }}>Sub Title 1 Bold</h1> |

#### Sub Title 2

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-title-2-regular` | Weight: 400 / Regular <br/> Size: 16px / 1rem <br/> Height: 20px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-2-regular)' }}>Sub Title 2 Regular</h1> |
| `--bl-font-title-2-medium` | Weight: 500 / Medium <br/> Size: 16px / 1rem <br/> Height: 20px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-2-medium)' }}>Sub Title 2 Medium</h1> |
| `--bl-font-title-2-semibold` | Weight: 600 / Semibold <br/> Size: 16px / 1rem <br/> Height: 20px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-2-semibold)' }}>Sub Title 2 Semibold</h1> |
| `--bl-font-title-2-bold` | Weight: 700 / Bold <br/> Size: 16px / 1rem <br/> Height: 20px (font size + `bl-size-3xs`) | <h1 style={{ font: 'var(--bl-font-title-2-bold)' }}>Sub Title 2 Bold</h1> |

#### Sub Title 3

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-title-3-regular` | Weight: 400 / Regular <br/> Size: 14px / 0.875rem <br/> Height: 16px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-title-3-regular)' }}>Sub Title 3 Regular</h1> |
| `--bl-font-title-3-medium` | Weight: 500 / Medium <br/> Size: 14px / 0.875rem <br/> Height: 16px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-title-3-medium)' }}>Sub Title 3 Medium</h1> |
| `--bl-font-title-3-semibold` | Weight: 600 / Semibold <br/> Size: 14px / 0.875rem <br/> Height: 16px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-title-3-semibold)' }}>Sub Title 3 Semibold</h1> |
| `--bl-font-title-3-bold` | Weight: 700 / Bold <br/> Size: 14px / 0.875rem <br/> Height: 16px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-title-3-bold)' }}>Sub Title 3 Bold</h1> |

#### Sub Title 4

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-title-4-regular` | Weight: 400 / Regular <br/> Size: 12px / 0.75rem <br/> Height: 14px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-title-4-regular)' }}>Sub Title 4 Regular</h1> |
| `--bl-font-title-4-medium` | Weight: 500 / Medium <br/> Size: 12px / 0.75rem <br/> Height: 14px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-title-4-medium)' }}>Sub Title 4 Medium</h1> |
| `--bl-font-title-4-semibold` | Weight: 600 / Semibold <br/> Size: 12px / 0.75rem <br/> Height: 14px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-title-4-semibold)' }}>Sub Title 4 Semibold</h1> |
| `--bl-font-title-4-bold` | Weight: 700 / Bold <br/> Size: 12px / 0.75rem <br/> Height: 14px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-title-4-bold)' }}>Sub Title 4 Bold</h1> |


## Body Texts

Body text typically used for long-form writing as it works well for small text sizes.

#### Body Text 1

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-body-text-1-regular` | Weight: 400 / Regular <br/> Size: 16px / 1rem <br/> Height: 18px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-1-regular)' }}>Form Body Text 1 Regular</h1> |
| `--bl-font-body-text-1-medium` | Weight: 500 / Medium <br/> Size: 16px / 1rem <br/> Height: 18px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-1-medium)' }}>Form Body Text 1 Medium</h1> |

#### Body Text 2

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-body-text-2-regular` | Weight: 400 / Regular <br/> Size: 14px / 0.875rem <br/> Height: 16px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-2-regular)' }}>Form Body Text 2 Regular</h1> |
| `--bl-font-body-text-2-medium` | Weight: 500 / Medium <br/> Size: 14px / 0.875rem <br/> Height: 16px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-2-medium)' }}>Form Body Text 2 Medium</h1> |

#### Body Text 3

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-body-text-3-regular` | Weight: 400 / Regular <br/> Size: 12px / 0.75rem <br/> Height: 14px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-3-regular)' }}>Form Body Text 3 Regular</h1> |
| `--bl-font-body-text-3-medium` | Weight: 500 / Medium <br/> Size: 12px / 0.75rem <br/> Height: 14px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-body-text-3-medium)' }}>Form Body Text 3 Medium</h1> |


## Captions

Caption is the smallest font size. They are mostly used for labels.

| Variable | Styles | Example |
|:---------|:-------|:-------:|
| `--bl-font-caption` | Weight: 500 / Medium <br/> Size: 10px / 0.625rem <br/> Height: 12px (font size + `bl-size-4xs`) | <h1 style={{ font: 'var(--bl-font-caption)' }}>Caption</h1> |

## CSS Variables

Here are the CSS variables provided and used in all of the Baklava components regarding to typography rules:

```css
--bl-font-family: 'RubikVariable', sans-serif;

/* Font weights */
--bl-font-weight-light: 300;
--bl-font-weight-regular: 400;
--bl-font-weight-medium: 500;
--bl-font-weight-semibold: 600;
--bl-font-weight-bold: 700;

/* Font sizes */
--bl-font-size-2xs: 0.5rem; /* 8px */
--bl-font-size-xs: 0.625rem; /* 10px */
--bl-font-size-s: 0.75rem; /* 12px */
--bl-font-size-m: 0.875rem; /* 14px */
--bl-font-size-l: 1rem; /* 16px */
--bl-font-size-xl: 1.25rem; /* 20px */
--bl-font-size-2xl: 1.5rem; /* 24px */
--bl-font-size-3xl: 1.75rem; /* 28px */
--bl-font-size-4xl: 2rem; /* 32px */
--bl-font-size-5xl: 3rem; /* 48px */
--bl-font-size-6xl: 4rem; /* 64px */
```
